'use client'

import { useState, useRef, useEffect } from 'react'

// 演变时期数据接口
interface EvolutionPeriod {
  id: string
  name: string
  period: string
  char: string
  description: string
  features: string[]
  color: string
}

// 组件属性接口
interface EvolutionTimelineProps {
  title: string
  subtitle: string
  periods: EvolutionPeriod[]
  defaultSelected?: string
}

export function EvolutionTimeline({ 
  title, 
  subtitle, 
  periods, 
  defaultSelected 
}: EvolutionTimelineProps) {
  const [selectedPeriod, setSelectedPeriod] = useState(defaultSelected || periods[0]?.id)
  const [isDragging, setIsDragging] = useState(false)
  const [dragStartY, setDragStartY] = useState(0)
  const [scrollStartY, setScrollStartY] = useState(0)
  const scrollContainerRef = useRef<HTMLDivElement>(null)
  const audioContextRef = useRef<AudioContext | null>(null)
  
  // 获取当前选中的数据
  const selectedData = periods.find(p => p.id === selectedPeriod) || periods[0]

  // 初始化音频上下文
  useEffect(() => {
    if (typeof window !== 'undefined') {
      try {
        audioContextRef.current = new (window.AudioContext || (window as any).webkitAudioContext)()
      } catch (e) {
        console.log('音频上下文初始化失败')
      }
    }
  }, [])

  // 全局拖拽事件监听
  useEffect(() => {
    const handleGlobalMouseMove = (e: MouseEvent) => {
      if (isDragging) {
        handleDragMove(e as any)
      }
    }

    const handleGlobalMouseUp = () => {
      if (isDragging) {
        handleDragEnd()
      }
    }

    if (isDragging) {
      document.addEventListener('mousemove', handleGlobalMouseMove)
      document.addEventListener('mouseup', handleGlobalMouseUp)
      document.body.style.userSelect = 'none' // 防止文字选择
    }

    return () => {
      document.removeEventListener('mousemove', handleGlobalMouseMove)
      document.removeEventListener('mouseup', handleGlobalMouseUp)
      document.body.style.userSelect = ''
    }
  }, [isDragging])

  // 播放滚轮音效
  const playScrollSound = () => {
    if (!audioContextRef.current) return
    
    try {
      const ctx = audioContextRef.current
      const oscillator = ctx.createOscillator()
      const gainNode = ctx.createGain()
      
      oscillator.connect(gainNode)
      gainNode.connect(ctx.destination)
      
      // 创建机械滚轮的音效
      oscillator.frequency.setValueAtTime(200, ctx.currentTime)
      oscillator.frequency.exponentialRampToValueAtTime(150, ctx.currentTime + 0.1)
      
      gainNode.gain.setValueAtTime(0.1, ctx.currentTime)
      gainNode.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.1)
      
      oscillator.start(ctx.currentTime)
      oscillator.stop(ctx.currentTime + 0.1)
    } catch (e) {
      console.log('音效播放失败')
    }
  }

  // 播放选择音效
  const playSelectSound = () => {
    if (!audioContextRef.current) return
    
    try {
      const ctx = audioContextRef.current
      const oscillator = ctx.createOscillator()
      const gainNode = ctx.createGain()
      
      oscillator.connect(gainNode)
      gainNode.connect(ctx.destination)
      
      // 创建选择确认的音效
      oscillator.frequency.setValueAtTime(400, ctx.currentTime)
      oscillator.frequency.setValueAtTime(600, ctx.currentTime + 0.05)
      oscillator.frequency.setValueAtTime(500, ctx.currentTime + 0.1)
      
      gainNode.gain.setValueAtTime(0.15, ctx.currentTime)
      gainNode.gain.exponentialRampToValueAtTime(0.01, ctx.currentTime + 0.15)
      
      oscillator.start(ctx.currentTime)
      oscillator.stop(ctx.currentTime + 0.15)
    } catch (e) {
      console.log('选择音效播放失败')
    }
  }

  // 处理拖拽开始
  const handleDragStart = (e: React.MouseEvent | React.TouchEvent) => {
    setIsDragging(true)
    const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY
    setDragStartY(clientY)
    
    if (scrollContainerRef.current) {
      setScrollStartY(scrollContainerRef.current.scrollTop)
    }
    
    // 启用音频上下文（用户交互后）
    if (audioContextRef.current && audioContextRef.current.state === 'suspended') {
      audioContextRef.current.resume()
    }
  }

  // 处理拖拽移动
  const handleDragMove = (e: React.MouseEvent | React.TouchEvent) => {
    if (!isDragging || !scrollContainerRef.current) return
    
    e.preventDefault()
    const clientY = 'touches' in e ? e.touches[0].clientY : e.clientY
    const deltaY = clientY - dragStartY
    const newScrollTop = scrollStartY - deltaY * 1.5 // 增加拖拽敏感度
    
    scrollContainerRef.current.scrollTop = newScrollTop
    
    // 播放滚动音效（节流）
    if (Math.abs(deltaY) > 10) {
      playScrollSound()
      setDragStartY(clientY)
      setScrollStartY(newScrollTop)
    }
  }

  // 处理拖拽结束
  const handleDragEnd = () => {
    setIsDragging(false)
  }

  // 处理滚轮事件
  const handleWheel = (e: React.WheelEvent) => {
    playScrollSound()
  }

  // 渲染历史背景
  const renderHistoricalBackground = (periodId: string) => {
    switch(periodId) {
      case 'jiaguwen':
        // 甲骨文 - 逼真龟甲背景
        return (
          <div className="w-full h-full bg-gradient-to-br from-amber-200 via-yellow-100 to-amber-300 relative overflow-hidden">
            {/* 龟甲基础纹理 */}
            <div className="absolute inset-0" style={{
              background: `
                radial-gradient(ellipse 120px 80px at 25% 25%, rgba(139, 69, 19, 0.15) 40%, transparent 70%),
                radial-gradient(ellipse 100px 60px at 75% 30%, rgba(139, 69, 19, 0.12) 40%, transparent 70%),
                radial-gradient(ellipse 80px 100px at 20% 70%, rgba(139, 69, 19, 0.18) 40%, transparent 70%),
                radial-gradient(ellipse 90px 70px at 80% 75%, rgba(139, 69, 19, 0.14) 40%, transparent 70%)
              `
            }}></div>
            
            {/* 龟甲裂纹 */}
            <div className="absolute inset-0 opacity-40">
              <svg className="w-full h-full" viewBox="0 0 400 300" preserveAspectRatio="none">
                {/* 主要裂纹线 */}
                <path d="M50,50 Q150,80 250,60 T380,90" stroke="rgba(139, 69, 19, 0.6)" strokeWidth="2" fill="none" />
                <path d="M20,120 Q120,140 220,130 T350,150" stroke="rgba(139, 69, 19, 0.5)" strokeWidth="1.5" fill="none" />
                <path d="M80,200 Q180,220 280,210 T400,230" stroke="rgba(139, 69, 19, 0.7)" strokeWidth="2" fill="none" />
                
                {/* 次要裂纹 */}
                <path d="M0,80 L100,85 L200,75 L300,85 L400,80" stroke="rgba(139, 69, 19, 0.3)" strokeWidth="1" fill="none" />
                <path d="M0,180 L120,185 L240,175 L360,185 L400,180" stroke="rgba(139, 69, 19, 0.4)" strokeWidth="1" fill="none" />
                
                {/* 交叉裂纹 */}
                <path d="M150,0 Q155,100 160,200 T170,300" stroke="rgba(139, 69, 19, 0.4)" strokeWidth="1.5" fill="none" />
                <path d="M250,0 Q245,80 240,160 T230,300" stroke="rgba(139, 69, 19, 0.3)" strokeWidth="1" fill="none" />
              </svg>
            </div>
            
            {/* 古老斑点 */}
            <div className="absolute inset-0 opacity-25" style={{
              backgroundImage: `
                radial-gradient(circle 3px at 15% 20%, rgba(101, 37, 6, 0.8), transparent),
                radial-gradient(circle 2px at 35% 45%, rgba(101, 37, 6, 0.6), transparent),
                radial-gradient(circle 4px at 65% 25%, rgba(101, 37, 6, 0.7), transparent),
                radial-gradient(circle 2px at 85% 60%, rgba(101, 37, 6, 0.5), transparent),
                radial-gradient(circle 3px at 25% 80%, rgba(101, 37, 6, 0.6), transparent),
                radial-gradient(circle 2px at 75% 85%, rgba(101, 37, 6, 0.4), transparent)
              `
            }}></div>
            
            {/* 光影效果 */}
            <div className="absolute inset-0 bg-gradient-to-br from-transparent via-amber-100/30 to-amber-300/50"></div>
          </div>
        )
      
      case 'jinwen':
        // 金文 - 逼真青铜器背景
        return (
          <div className="w-full h-full bg-gradient-to-br from-green-900 via-green-800 to-amber-900 relative overflow-hidden">
            {/* 青铜基础纹理 */}
            <div className="absolute inset-0" style={{
              background: `
                radial-gradient(circle 200px at 30% 40%, rgba(34, 197, 94, 0.2) 0%, transparent 50%),
                radial-gradient(circle 150px at 70% 60%, rgba(251, 191, 36, 0.15) 0%, transparent 50%),
                radial-gradient(circle 100px at 20% 80%, rgba(34, 197, 94, 0.18) 0%, transparent 50%)
              `
            }}></div>
            
            {/* 青铜器纹饰 */}
            <div className="absolute inset-0 opacity-30">
              <svg className="w-full h-full" viewBox="0 0 400 300" preserveAspectRatio="none">
                {/* 饕餮纹样式花纹 */}
                <circle cx="100" cy="80" r="25" fill="none" stroke="rgba(34, 197, 94, 0.4)" strokeWidth="2" />
                <circle cx="300" cy="80" r="25" fill="none" stroke="rgba(34, 197, 94, 0.4)" strokeWidth="2" />
                <circle cx="200" cy="150" r="30" fill="none" stroke="rgba(34, 197, 94, 0.5)" strokeWidth="2" />
                <circle cx="100" cy="220" r="20" fill="none" stroke="rgba(34, 197, 94, 0.3)" strokeWidth="2" />
                <circle cx="300" cy="220" r="20" fill="none" stroke="rgba(34, 197, 94, 0.3)" strokeWidth="2" />
                
                {/* 连接线条 */}
                <path d="M100,80 Q200,100 300,80" stroke="rgba(34, 197, 94, 0.4)" strokeWidth="1.5" fill="none" />
                <path d="M100,220 Q200,200 300,220" stroke="rgba(34, 197, 94, 0.4)" strokeWidth="1.5" fill="none" />
                <path d="M200,120 L200,180" stroke="rgba(34, 197, 94, 0.5)" strokeWidth="2" fill="none" />
                
                {/* 装饰性螺旋 */}
                <path d="M80,60 Q90,70 100,60 Q110,50 120,60 Q130,70 140,60" stroke="rgba(251, 191, 36, 0.4)" strokeWidth="1" fill="none" />
                <path d="M260,60 Q270,70 280,60 Q290,50 300,60 Q310,70 320,60" stroke="rgba(251, 191, 36, 0.4)" strokeWidth="1" fill="none" />
              </svg>
            </div>
            
            {/* 青铜锈迹 */}
            <div className="absolute inset-0 opacity-20" style={{
              backgroundImage: `
                radial-gradient(circle 8px at 25% 30%, rgba(34, 197, 94, 0.8), transparent),
                radial-gradient(circle 6px at 45% 20%, rgba(34, 197, 94, 0.6), transparent),
                radial-gradient(circle 10px at 75% 40%, rgba(34, 197, 94, 0.7), transparent),
                radial-gradient(circle 5px at 15% 70%, rgba(34, 197, 94, 0.5), transparent),
                radial-gradient(circle 7px at 85% 80%, rgba(34, 197, 94, 0.6), transparent),
                radial-gradient(circle 4px at 60% 85%, rgba(251, 191, 36, 0.4), transparent)
              `
            }}></div>
            
            {/* 金属光泽 */}
            <div className="absolute inset-0 bg-gradient-to-br from-transparent via-green-600/20 to-amber-700/30"></div>
            <div className="absolute top-0 left-0 w-full h-1/3 bg-gradient-to-b from-green-400/10 to-transparent"></div>
          </div>
        )
      
      case 'xiandai':
        // 现代汉字 - 现代科技背景
        return (
          <div className="w-full h-full bg-gradient-to-br from-blue-50 via-indigo-50 to-purple-50 relative overflow-hidden">
            {/* 现代科技基础纹理 */}
            <div className="absolute inset-0" style={{
              background: `
                radial-gradient(circle 150px at 25% 25%, rgba(99, 102, 241, 0.08) 0%, transparent 60%),
                radial-gradient(circle 120px at 75% 30%, rgba(139, 92, 246, 0.06) 0%, transparent 60%),
                radial-gradient(circle 100px at 30% 75%, rgba(59, 130, 246, 0.07) 0%, transparent 60%),
                radial-gradient(circle 80px at 80% 80%, rgba(99, 102, 241, 0.05) 0%, transparent 60%)
              `
            }}></div>
            
            {/* 现代网格纹理 */}
            <div className="absolute inset-0 opacity-20">
              <div className="w-full h-full" style={{
                backgroundImage: `
                  linear-gradient(90deg, rgba(99, 102, 241, 0.15) 1px, transparent 1px),
                  linear-gradient(0deg, rgba(99, 102, 241, 0.15) 1px, transparent 1px),
                  linear-gradient(45deg, rgba(139, 92, 246, 0.08) 1px, transparent 1px),
                  linear-gradient(-45deg, rgba(59, 130, 246, 0.08) 1px, transparent 1px)
                `,
                backgroundSize: '20px 20px, 20px 20px, 40px 40px, 40px 40px'
              }}></div>
            </div>
            
            {/* 科技电路纹理 */}
            <div className="absolute inset-0 opacity-25">
              <svg className="w-full h-full" viewBox="0 0 400 300" preserveAspectRatio="none">
                {/* 电路线条 */}
                <path d="M0,100 L100,100 L100,50 L200,50 L200,100 L300,100 L300,150 L400,150" 
                      stroke="rgba(99, 102, 241, 0.3)" strokeWidth="1.5" fill="none" />
                <path d="M0,200 L80,200 L80,250 L180,250 L180,200 L280,200 L280,150 L400,150" 
                      stroke="rgba(139, 92, 246, 0.3)" strokeWidth="1.5" fill="none" />
                <path d="M100,0 L100,80 L150,80 L150,120 L200,120 L200,180 L250,180 L250,300" 
                      stroke="rgba(59, 130, 246, 0.3)" strokeWidth="1.5" fill="none" />
                
                {/* 电路节点 */}
                <circle cx="100" cy="100" r="3" fill="rgba(99, 102, 241, 0.4)" />
                <circle cx="200" cy="50" r="3" fill="rgba(139, 92, 246, 0.4)" />
                <circle cx="300" cy="100" r="3" fill="rgba(59, 130, 246, 0.4)" />
                <circle cx="180" cy="250" r="3" fill="rgba(99, 102, 241, 0.4)" />
                <circle cx="150" cy="80" r="3" fill="rgba(139, 92, 246, 0.4)" />
                <circle cx="250" cy="180" r="3" fill="rgba(59, 130, 246, 0.4)" />
              </svg>
            </div>
            
            {/* 现代光点效果 */}
            <div className="absolute inset-0 opacity-20" style={{
              backgroundImage: `
                radial-gradient(circle 4px at 20% 20%, rgba(99, 102, 241, 0.6), transparent),
                radial-gradient(circle 3px at 60% 15%, rgba(139, 92, 246, 0.5), transparent),
                radial-gradient(circle 5px at 80% 40%, rgba(59, 130, 246, 0.7), transparent),
                radial-gradient(circle 2px at 15% 60%, rgba(99, 102, 241, 0.4), transparent),
                radial-gradient(circle 4px at 70% 70%, rgba(139, 92, 246, 0.6), transparent),
                radial-gradient(circle 3px at 40% 85%, rgba(59, 130, 246, 0.5), transparent)
              `
            }}></div>
            
            {/* 现代光泽效果 */}
            <div className="absolute inset-0 bg-gradient-to-br from-blue-100/30 via-transparent to-purple-100/40"></div>
            <div className="absolute top-0 left-0 w-full h-1/3 bg-gradient-to-b from-white/15 to-transparent"></div>
            
            {/* 动态光效 */}
            <div className="absolute inset-0 bg-gradient-to-r from-transparent via-indigo-200/10 to-transparent animate-pulse"></div>
          </div>
        )
      
      default:
        return (
          <div className="w-full h-full bg-gradient-to-br from-gray-50 to-white"></div>
        )
    }
  }

  return (
    <div className="w-full h-full bg-gradient-to-br from-amber-50 to-orange-50 rounded-3xl p-6 flex flex-col relative">
      {/* 标题 */}
      <div className="text-center mb-6">
        <h2 className="text-3xl font-bold text-amber-800 mb-2">{title}</h2>
        <p className="text-lg text-amber-700">{subtitle}</p>
      </div>

      {/* 时间线 */}
      <div className="flex-1 flex">
        {/* 左侧时间线滚轮 - 占一半空间 */}
        <div className="w-1/2 pr-6">
          <div className="relative h-full">
            {/* 滚轮容器 - 类似密码滚轮，固定高度 */}
            <div className={`relative h-96 bg-gradient-to-b from-amber-100 via-white to-amber-100 rounded-2xl shadow-inner overflow-hidden mx-auto max-w-sm border-4 border-amber-200 transition-all duration-200 ${isDragging ? 'scale-[1.02] shadow-2xl' : 'hover:scale-[1.01]'}`}>
              {/* 滚轮边框装饰 */}
              <div className="absolute inset-0 rounded-xl border-2 border-amber-300/30 pointer-events-none"></div>
              
              {/* 中央聚焦区域指示器 */}
              <div className="absolute left-0 right-0 top-1/2 transform -translate-y-1/2 h-20 bg-gradient-to-r from-amber-200/50 via-amber-300/30 to-amber-200/50 border-y-2 border-amber-400/50 z-10 pointer-events-none">
                {/* 聚焦区域左右指示器 */}
                <div className="absolute left-0 top-1/2 transform -translate-y-1/2 w-4 h-8 bg-amber-500 rounded-r-lg shadow-lg"></div>
                <div className="absolute right-0 top-1/2 transform -translate-y-1/2 w-4 h-8 bg-amber-500 rounded-l-lg shadow-lg"></div>
              </div>
              
              {/* 滚动容器 - 只有这个区域滚动 */}
              <div 
                ref={scrollContainerRef}
                className={`h-full overflow-y-auto scrollbar-thin scrollbar-thumb-amber-400 scrollbar-track-transparent py-40 ${isDragging ? 'cursor-grabbing' : 'cursor-grab'}`}
                style={{ scrollBehavior: isDragging ? 'auto' : 'smooth' }}
                onMouseDown={handleDragStart}
                onMouseMove={handleDragMove}
                onMouseUp={handleDragEnd}
                onMouseLeave={handleDragEnd}
                onTouchStart={handleDragStart}
                onTouchMove={handleDragMove}
                onTouchEnd={handleDragEnd}
                onWheel={handleWheel}
              >
                {/* 时间节点 - 密码滚轮样式 */}
                <div className="space-y-1">
                  {periods.map((period, index) => {
                    const isSelected = selectedPeriod === period.id
                    
                    return (
                      <button
                        key={period.id}
                        onClick={() => {
                          setSelectedPeriod(period.id)
                          playSelectSound()
                          // 滚动到选中项
                          const element = document.getElementById(`period-${period.id}`)
                          if (element) {
                            element.scrollIntoView({ 
                              behavior: 'smooth', 
                              block: 'center' 
                            })
                          }
                        }}
                        id={`period-${period.id}`}
                        className={`
                          relative w-full text-center py-4 px-3 transition-all duration-300 transform
                          ${isSelected 
                            ? 'bg-gradient-to-r from-amber-400 to-orange-400 text-white scale-105 shadow-lg z-20 border-2 border-amber-500' 
                            : 'bg-white/70 text-amber-800 hover:bg-white/90 hover:scale-102 border border-amber-200/30'
                          }
                        `}
                        style={{
                          backdropFilter: 'blur(10px)',
                        }}
                      >
                        {/* 滚轮刻度线 */}
                        <div className={`
                          absolute left-2 top-1/2 transform -translate-y-1/2 w-3 h-0.5 
                          ${isSelected ? 'bg-white' : 'bg-amber-400'}
                        `}></div>
                        <div className={`
                          absolute right-2 top-1/2 transform -translate-y-1/2 w-3 h-0.5 
                          ${isSelected ? 'bg-white' : 'bg-amber-400'}
                        `}></div>
                        
                        {/* 内容 */}
                        <div className="flex items-center justify-center gap-3">
                          {/* 字符 */}
                          <div className={`text-2xl font-bold ${isSelected ? 'text-white' : 'text-amber-700'}`}>
                            {period.char}
                          </div>
                          
                          {/* 名称 */}
                          <div className="text-left">
                            <div className={`font-bold text-sm ${isSelected ? 'text-white' : 'text-amber-800'}`}>
                              {period.name}
                            </div>
                            <div className={`text-xs ${isSelected ? 'text-amber-100' : 'text-amber-600'}`}>
                              {period.period.split('(')[0].trim()}
                            </div>
                          </div>
                        </div>
                        
                        {/* 选中指示器 */}
                        {isSelected && (
                          <>
                            <div className="absolute -left-1 top-1/2 transform -translate-y-1/2 w-2 h-8 bg-amber-500 rounded-r-full animate-pulse"></div>
                            <div className="absolute -right-1 top-1/2 transform -translate-y-1/2 w-2 h-8 bg-amber-500 rounded-l-full animate-pulse"></div>
                          </>
                        )}
                      </button>
                    )
                  })}
                </div>
              </div>
              
              {/* 顶部渐变遮罩 */}
              <div className="absolute top-0 left-0 right-0 h-40 bg-gradient-to-b from-amber-100 via-amber-50/80 to-transparent pointer-events-none z-30 rounded-t-xl"></div>
               
              {/* 底部渐变遮罩 */}
              <div className="absolute bottom-0 left-0 right-0 h-40 bg-gradient-to-t from-amber-100 via-amber-50/80 to-transparent pointer-events-none z-30 rounded-b-xl"></div>
            </div>
          </div>
        </div>

        {/* 右侧详细展示 - 占另一半空间，带历史背景 */}
        <div className="w-1/2 relative rounded-2xl overflow-hidden shadow-lg h-[670px]">
          {/* 历史背景层 */}
          <div className="absolute inset-0">
            {renderHistoricalBackground(selectedData.id)}
          </div>
          
          {/* 内容层 */}
          <div className="relative z-10 h-full p-8 bg-white/20 backdrop-blur-sm">
            <div className="h-full flex flex-col">
              {/* 图片展示区 - 未来用于显示后台传来的图片 */}
              <div className="text-center mb-6">
                <div className="relative mb-4">
                  {/* 图片容器 - 未来替换为真实图片 */}
                  <div className="w-40 h-40 mx-auto bg-white/95 rounded-2xl shadow-lg border-4 border-white flex items-center justify-center backdrop-blur-sm">
                    <div className={`text-[5rem] font-black text-transparent bg-gradient-to-r ${selectedData.color} bg-clip-text leading-none`}>
                      {selectedData.char}
                    </div>
                  </div>
                  
                  {/* 图片说明 */}
                  <div className="mt-3">
                    <div className="text-xl font-bold text-gray-800 mb-1">
                      {selectedData.name}
                    </div>
                    <div className="text-base text-gray-600">
                      {selectedData.period}
                    </div>
                  </div>
                </div>
              </div>

              {/* 详细说明 */}
              <div className="flex-1 space-y-4">
                <div>
                  <h3 className="text-lg font-bold text-gray-800 mb-2">字形特征</h3>
                  <p className="text-gray-800 leading-relaxed bg-white/80 rounded-lg p-3 shadow-sm text-sm">
                    {selectedData.description}
                  </p>
                </div>

                <div>
                  <h3 className="text-lg font-bold text-gray-800 mb-2">主要特点</h3>
                  <div className="grid grid-cols-1 gap-2">
                    {selectedData.features.map((feature, index) => (
                      <div key={index} className="flex items-center text-gray-800 bg-white/80 rounded-lg p-2 shadow-sm text-sm">
                        <div className="w-2 h-2 bg-amber-400 rounded-full mr-2"></div>
                        {feature}
                      </div>
                    ))}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

// 预设的汉字演变数据生成器
export function createCharacterEvolution(char: string): EvolutionPeriod[] {
  return [
    {
      id: 'jiaguwen',
      name: '甲骨文',
      period: '商朝 (约公元前1600-1046年)',
      char: '𠂇', // 可以根据具体字符调整
      description: `最早的汉字形式，刻在龟甲和兽骨上。"${char}"字像实物的形状，象形特征明显。`,
      features: ['象形特征明显', '笔画简单粗犷', '更接近实物形状'],
      color: 'from-amber-600 to-yellow-600'
    },
    {
      id: 'jinwen',
      name: '金文',
      period: '西周-春秋 (约公元前1046-476年)',
      char: char,
      description: `铸造在青铜器上的文字。"${char}"字在金文中保持了基本形象，但笔画更加规整。`,
      features: ['笔画更加规整', '保持象形特征', '铸造工艺影响字形'],
      color: 'from-yellow-600 to-amber-600'
    },
    {
      id: 'xiandai',
      name: '现代汉字',
      period: '1950年代-至今',
      char: char,
      description: `经过简化和规范的现代汉字。"${char}"字成为现代汉语的标准用字。`,
      features: ['简化规范', '印刷标准', '数字化适配'],
      color: 'from-indigo-600 to-purple-600'
    }
  ]
} 